<style lang="less">
	/*@import './international.less';*/
</style>

<template>
	<div>
		<common-page v-bind="menuPage" @beforeAjaxSubmit="beforeAjaxSubmit" @ajaxLoadSuccess="updateRoles">
			<template slot="modal">
				<Form :model="menuPage.detailData" :label-width="80">
					<FormItem label="用户名">
						<Input v-model="menuPage.detailData.username"></Input>
					</FormItem>
					<FormItem label="密码">
						<Input v-model="menuPage.detailData.password" type="password"></Input>
					</FormItem>
					<FormItem label="邮箱">
						<Input v-model="menuPage.detailData.email"></Input>
					</FormItem>
					<FormItem label="手机">
						<Input v-model="menuPage.detailData.phoneNumber"></Input>
					</FormItem>
					<FormItem label="状态">
						<Select v-model="menuPage.detailData.state">
							<Option value="1" :key="1">有效</Option>
							<Option value="2" :key="2">无效</Option>
						</Select>
					</FormItem>
					<div style="text-align: center;">
						<autoTransfer url="role/list" :targetKeys.sync="menuPage.detailData.sysRoleIdList" :titles="['可选角色', '已分配角色']"
									  :listStyle="{height:'300px',width:'200px', textAlign: 'left'}"></autoTransfer>
					</div>
				</Form>
			</template>
		</common-page>
	</div>
</template>

<script>

    import commonPage from '@/views/common/common-page.vue';
    import util from '@/libs/util';
    import autoSelect from '@/views/common/autoSelect.vue';
    import md5 from 'md5';
    import autoTransfer from '@/views/common/autoTransfer.vue';

    // 默认界面查询条件
    let pageParams = Object.assign({}, util.queryParams, { // 额外的参数,比如条件的默认值
        sortName: "id",
        sortOrder: "asc"
    });
    export default {
        name: 'role-page',
        components: {
            commonPage,
            autoSelect,
            autoTransfer
        },
        props: {
            columns: Array
        },
        data () {
            return {
                menuPage: {
                    toolbar: {
                        menuSn: "user",
                        buttons: []
                    },
                    list: {
                        table: {
                            columns: [{type: 'selection', width: 50, align: 'center'},
                                {type: 'index', width: 60, align: 'center'},
                                {title: 'ID', key: 'id', sortable: "custom"},
                                {title: '用户名', key: 'username'},
                                {title: '邮箱', key: 'email'},
                                {title: '手机', key: 'phoneNumber'},
                                {
                                    title: '角色', key: 'roleName', render: (h, obj) => {
                                    let roleDtos = obj.row.sysRoleDtoList;
                                    let result = "";
                                    if (roleDtos && roleDtos.length) {
                                        roleDtos.forEach((value) => {
                                            result += value.text + ",";
                                        });
                                    }
                                    if (result) {
                                        return result.substr(0, result.length - 1);
                                    } else {
                                        return "";
                                    }
                                }
                                },
                                {
                                    title: '状态', key: 'state', render: (h, obj) => {
                                    if (obj.row.state === "1") {
                                        return "有效";
                                    } else if (obj.row.state === "2") {
                                        return "无效";
                                    }
                                    return obj.row.state;
                                }
                                }
                            ],
                            data: []
                        },
                        url: "user/list",
                        queryParams: pageParams

                    },
                    searchbar: {
                        queryParams: pageParams,
                        inputs: [{
                            text: "用户名",
                            sn: "username",
                            style: {
                                width: "200px"
                            }
                        }, {
                            text: "角色名",
                            sn: "roleId",
                            type: "autoSelect",
                            url: "role/list",
                            valueField: "id",
                            textField: "text",
                            style: {
                                width: "200px"
                            }
                        }]
                    },
                    pageParams: pageParams,
                    detailData: {
                        menuSn: "",
                        id: "",
                        username: "",
                        password: "",
                        email: "",
                        state: 1,
                        sysRoleIdList: [],
                        phoneNumber: ""
                    }
                }
            };
        },
        methods: {
            beforeAjaxSubmit(){
                if (this.menuPage.detailData.password.length !== 32) {
                    this.menuPage.detailData.password = md5(this.menuPage.detailData.password);
                }
            },
            updateRoles(cnf){ // 更新权限已经关联的角色
                let me = this;
                let response = cnf.response;
                let context = response.data;
                let dto = context.data;
                me.menuPage.detailData.sysRoleIdList = me.menuPage.detailData.sysRoleIdList || [];
                if (dto.sysRoleDtoList && dto.sysRoleDtoList.length) {
                    dto.sysRoleDtoList.forEach((value, index, arr) => {
                        me.menuPage.detailData.sysRoleIdList.push(value.id);
                    });
                }
            }
        },
        created(){
        }
        ,
        mounted(){
        },
        watch: {}
    };
</script>
